@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-popover';

.popoverContainer {
  @include composite-var($popover-container);
  @include composite-var($sans-body-s);

  overflow: hidden;

  box-sizing: border-box;

  word-wrap: break-word;

  background-color: $sys-neutral-background2-level;
  box-shadow: $box-shadow-elevation-level3;

  &[data-disable-max-width='true'] {
    max-width: calc(100vw - $dimension-2m);
  }
}

.popoverArrowElement {
  @include composite-var($popover-pointer-arrow);

  fill: currentColor;
}

.popoverArrowContainer {
  @include composite-var($popover-popover-pointer);

  position: absolute;

  display: flex;

  padding-top: 0;
  padding-bottom: 0;

  color: $sys-neutral-background2-level;
}
